<template>
	<view class="content">
		<view class="brand-lsit">
			<view class="brand-header-text">
				<view class="line"></view> 热改楼盘
			</view>
			<view class="brand-image-list">
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
			</view>
		</view>
		<view class="setmeal-header-text">
			<view class="line"></view> 楼盘套餐
		</view>
		<view class="setmeal-list">
			<view class="setmeal-row-image">
				<view class="setmeal-image-list">
					<image class="setmeal-image" src="../../static/images/index/setmeal1.png">
					</image>
					<view class="setmeal-image-details">
						<text class="image-details-1">某某某某某某套餐</text>
						<view class="image-details-textview">
							<text class="image-details-2">150-180m²</text>
							<text class="image-details-3">9999</text>
						</view>
						<text class="image-details-4">套餐具体套餐具体套餐具体套餐 具体套餐具体</text>
					</view>
				</view>
				<view class="setmeal-image-list">
					<image class="setmeal-image" src="../../static/images/index/setmeal2.png"></image>
					<view class="setmeal-image-details">
						<text class="image-details-1">某某某某某某套餐</text>
						<view class="image-details-textview">
							<text class="image-details-2">150-180m²</text>
							<text class="image-details-3">9999</text>
						</view>
						<text class="image-details-4">套餐具体套餐具体套餐具体套餐 具体套餐具体</text>
					</view>
				</view>
			</view>
			<view class="setmeal-row-image">
				<view class="setmeal-image-list">
					<image class="setmeal-image" src="../../static/images/index/setmeal1.png">
					</image>
					<view class="setmeal-image-details">
						<text class="image-details-1">某某某某某某套餐</text>
						<view class="image-details-textview">
							<text class="image-details-2">150-180m²</text>
							<text class="image-details-3">9999</text>
						</view>
						<text class="image-details-4">套餐具体套餐具体套餐具体套餐 具体套餐具体</text>
					</view>
				</view>
				<view class="setmeal-image-list">
					<image class="setmeal-image" src="../../static/images/index/setmeal2.png"></image>
					<view class="setmeal-image-details">
						<text class="image-details-1">某某某某某某套餐</text>
						<view class="image-details-textview">
							<text class="image-details-2">150-180m²</text>
							<text class="image-details-3">9999</text>
						</view>
						<text class="image-details-4">套餐具体套餐具体套餐具体套餐 具体套餐具体</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tabber">
			<navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">
				<view class="tabber-sy">
					<image class="tabber-image" src="../../static/images/icon/home_select.png"></image>
					<text class="tabber-sy">首页</text>
				</view>
			</navigator>
			<navigator url="../appointment/index" open-type="switchTab" hover-class="other-navigator-hover">
				<view class="tabber-yy">
					<image class="tabber-image" src="../../static/images/icon/time_unselect.png"></image>
					<text class="tabber-yy">预约</text>
				</view>
			</navigator>
			<navigator url="../my/index" open-type="switchTab" hover-class="other-navigator-hover">
				<view class="tabber-wd">
					<image class="tabber-image" src="../../static/images/icon/me_unselect.png"></image>
					<text class="tabber-wm">我们</text>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.content {
		
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		box-sizing: border-box; //盒子模型
	}
	::-webkit-scrollbar {
		width: 0;
	}
	.brand-lsit {
		width: 750rpx;
		height: 284rpx;
		background: #ffffff;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-top: 34rpx;
		padding-bottom: 28px;
	}
	.brand-header-text {
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
	
		display: flex;
		align-items: center;
	}
	.line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		margin-right: 20rpx;
	}
	.brand-image-list{
		box-sizing: border-box;
		overflow-x: scroll;
		margin-top: 20rpx;
		display: flex;
	}
	.view-imaga-list{
		margin-right: 20rpx;
	}
	.image-list{
		
		width: 280rpx;
		height: 168rpx;
	}
	
	.setmeal-header-text{
		margin-top: 20rpx;
		margin-left: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
			
		display: flex;
		align-items: center;
	}
	.setmeal-list{
		padding-bottom: 96rpx;
		margin-top: 20rpx;
		background: #f5f5f5;
	}
	.setmeal-row-image{
		box-sizing: border-box;
		overflow-x: scroll;
		display: flex;
	}
	.setmeal-image-list{
		margin-left: 40rpx;
		
		margin-right: 20rpx;
		position: relative;
	}
	.setmeal-image{
		width: 316rpx;
		height: 420rpx;
		background: rgba(0,0,0,0.50);
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		
	}
	.setmeal-image-details{
		width: 316rpx;
		height: 164rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		position: relative;
		bottom: 5rpx;
	}
	.image-details-1{
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		line-height: 24rpx;
	}
	.image-details-textview{
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		display: flex;
	}
	.image-details-2{
		font-size: 24rpx;
		font-weight: 500;
		text-align: CENTER;
		line-height: 24rpx;
	}
	.image-details-3::before{
		content: "￥";
		font-size: 20rpx;
		font-weight: 700;
		color: #e54040;
		line-height: 20rpx;
	}
	.image-details-3{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: CENTER;
		color: #e54040;
		line-height: 32rpx;
	}
	.image-details-4{
		font-size: 20rpx;
		font-weight: 0;
		color: #666666;
		line-height: 5rpx;
	}
	.tabber{
		box-sizing: border-box;
		justify-content: space-around;
		align-items: center;
		display: flex;
		width: 100%;
		height: 112rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 100;
		font-size: 30rpx;
		color: #999999;	
	}
	.tabber-image{
		width: 70rpx;
		height: 70rpx;
	}
	.tabber-sy{
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: CENTER;
		color: #3d9c36;
		line-height: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tabber-yy{
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: CENTER;
		color: #3d9c36;
		line-height: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tabber-wd{
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: CENTER;
		color: #3d9c36;
		line-height: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
